<template>
	<pro-table ref="protable" :loadDataUrl="loadDataUrl" rowKey="id" :columns="columns" :isRowSelection="true" @selectedRowChange="onSelectChange">
		<template slot="approval" slot-scope="{ text, record, index }">
			<a-tag :color="text == 1 ? '#247cf0' : text == 0 ? '#f00' : '#00a095'">{{ text == 0 ? '低于' : text == 1 ? '高于' : '持平' }}</a-tag>
		</template>
		<a-space slot="operation" slot-scope="{ text, record, index }">
			<a-button type="primary" size="small" @click="editQue(record)">编辑</a-button>
			<a-button type="danger" size="small" @click="showDeleteConfirm(record.id)">删除</a-button>
		</a-space>
		<template slot="footer">
			<a-button class="ant-btn-success" @click="editQue()">新增</a-button>
		</template>
		<add-que-modal ref="addQueModal" @ok="handlerRefresh(0)"></add-que-modal>
	</pro-table>
</template>

<script>
import { rowSelection } from '@/mixins'; //列表页面的一些公用方法
import addQueModal from './module/addQueModal'; //新增或编辑组件
import { api } from '@/api/index.js';
const columns = [
	{
		title: '题型',
		dataIndex: 'typeName',
		key: 'typeName',
		/* 筛选列表 */
		searchInfo: {
			type: 'select', //筛选类型 参考filterbar readme
			value: 'type', //查询字段，如果不配置，怎取key
			defaultValue: -1,
			optionlist: [{ value: '', text: '全部' }]
		}
	},
	{
		title: '题号',
		dataIndex: 'sort',
		key: 'sort'
	},
	{
		title: '正确答案',
		dataIndex: 'answer',
		key: 'answer'
	},
	{
		title: '分值',
		dataIndex: 'scores',
		key: 'scores'
	},
	{
		title: '操作',
		key: 'operate',
		dataIndex: 'operate',
		scopedSlots: { customRender: 'operation' },
		align: 'center',
		width: 160
	}
];
export default {
	name: 'questionllist',
	mixins: [rowSelection],
	data() {
		return {
			columns: columns,
			filter: {},
			loadDataUrl: api.getQuestionList //查询列表接口，请在 api/index.js中配置
		};
	},
	components: { addQueModal },
	filters: {},
	created() {
		this.getQuestionType();
	},
	methods: {
		/* 刷新列表当前页 */
		handlerRefresh(type) {
			this.$refs.protable.handlerRefresh(type);
		},
		/* 确认是否删除 */
		showDeleteConfirm(keys) {
			let _this = this;
			let title = '你确定要删除吗?';
			this.$confirm({
				title: title,
				content: '删除后数据将无法恢复',
				class: 'confirmbox',
				okType: 'danger',
				onOk() {
					_this.remove(keys);
				},
				onCancel() {}
			});
		},
		/*删除*/
		remove(delId) {
			this.$getAction(api.delQuestion, {
				id: delId
			}).then(res => {
				if (res.code == 200) {
					this.$message.success('删除成功');
					this.handlerRefresh();
				}
			});
		},
		/* 编辑 /添加*/
		editQue(record) {
			this.$refs.addQueModal.add(record);
		},
		/* 获取题目类型 */
		getQuestionType() {
			this.$postAction(api.getConfig, {
				type: 'question'
			}).then(da => {
				let list = [{ value: -1, text: '全部' }];
				for (var i = 0; i < da.data.length; i++) {
					list.push({
						value: da.data[i].code,
						text: da.data[i].name
					});
				}
				this.columns[0].searchInfo.optionlist = [...list];
			});
		}
	}
};
</script>

<style></style>
